// pages/essay-detail/essay-detail.js
import {fetchEssayDetail, essayLike, essayCollection, commentEssay, fetchEssayCommentList, replyComment} from '../../utils/request'
const Wxparse = require("../../components/wxParse/wxParse.js")
import Toast from 'tdesign-miniprogram/toast/index';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    essay: {},
    likeTag: false,
    collectionTag: false,
    likeCount: 0,
    collectionCount: 0,
    commentCount: 0,
    // 轮播图参数
    current: 1,
    autoplay: true,
    duration: '500',
    interval: 5000,
    navigation: { type: 'dots' },
    commentContent: '',
    visible: false,
    pageLoading: false,
    commentListLoadStatus: 0,
    commentListPagination: {
      index: 1,
      num: 10,
    },
    privateData: {
      tabIndex: 1,
    },
    commentList: [],
    essayId: 0,
    replyVisible: false,
    replyContent: '',
    commentId: 0,
    essayContent: ""
  },
  replyHandle(e) {
    console.log("replyHandle", e.currentTarget.dataset.id);
    this.setData({ replyVisible: true,
      commentId:e.currentTarget.dataset.id });
  },
  onReplyVisibleChange(e) {
    this.setData({
      replyVisible: e.detail.visible,
    });
  },
  handleReplyChange(e) {
    this.setData({
      replyContent: e.detail.value
    })
  },
  async reply() {
    const res = await replyComment({
      essayId: this.data.essayId,
      commentId: this.data.commentId,
      content: this.data.replyContent
    })
    this.setData({ replyVisible: false, replyContent: ''});
    Toast({
      context: this,
      selector: '#t-toast',
      message: '回复成功',
    });
    await this.loadEssayComentList(true);
  },

  handleCommentChange(e) {
    console.log("handleCommentChange", e);
    this.setData({
      commentContent: e.detail.value
    })
  },

  onVisibleChange(e) {
    this.setData({
      visible: e.detail.visible,
    });
  },

  handlePopup() {
    this.setData({ visible: true });
  },

  async comemnt() {
    const res = await commentEssay({
      essayId: this.data.essay.id,
      content: this.data.commentContent
    })
    let commentCount = this.data.commentCount + 1;
    this.setData({ visible: false, commentContent: '', commentCount: commentCount });
    Toast({
      context: this,
      selector: '#t-toast',
      message: '感谢评论',
    });
    await this.loadEssayComentList(true);
  },

  addLikeHandle() {
    essayLike(this.data.essay.id);
    const likeTag = this.data.likeTag;
    let likeCount = this.data.likeCount;
    if (likeTag) {
      likeCount -= 1
    } else {
      likeCount += 1
    }
    this.setData({
      likeTag: !likeTag,
      likeCount: likeCount
    })
  },

  addcollectionHandle() {
    essayCollection(this.data.essay.id);
    const collectionTag = this.data.collectionTag;
    let collectionCount = this.data.collectionCount;
    if (collectionTag) {
      collectionCount -= 1
    } else {
      collectionCount += 1
    }
    this.setData({
      collectionTag: !collectionTag,
      collectionCount: collectionCount
    })
  },

  async loadEssayComentList(fresh = false) {
    if (fresh) {
      wx.pageScrollTo({
        scrollTop: 0,
      });
    }
    console.log("loadEssayComentList2");
    this.setData({ commentListLoadStatus: 1 });
    
    const pageSize = this.data.commentListPagination.num;
    let pageIndex = this.data.privateData.tabIndex * pageSize + this.data.commentListPagination.index + 1;
    if (fresh) {
      pageIndex = 1;
    }
    console.log("loadEssayComentList3");
    try {
      const res = await fetchEssayCommentList({
        essayId: this.data.essay.id,
        pageNum: pageIndex,
        pageSize: 10
      });
      const nextList = res.data.content;
      this.setData({
        commentList: fresh ? nextList : this.data.commentList.concat(nextList),
        commentListLoadStatus: 0,
      });
      this.commentListPagination.index = pageIndex;
      this.commentListPagination.num = pageSize;
    } catch (err) {
      this.setData({ commentListPagination: 3 });
    }
  },

  onReachBottom() {
    if (this.data.commentListLoadStatus === 0) {
      this.loadEssayList();
    }
  },

  onReTry() {
    this.loadEssayComentList();
  },

  async onPullDownRefresh() {
    wx.stopPullDownRefresh();
    this.setData({
      pageLoading: true,
    });
    await this.loadEssayComentList(true);
    this.setData({
      pageLoading: false,
    });
  },

  async loadPage() {
    wx.stopPullDownRefresh();
    this.setData({
      pageLoading: true,
    });
    const essayId = this.data.essayId;
    const r1 = await fetchEssayDetail(essayId);
    this.setData({
      essay: r1.data,
      likeTag: r1.data.likeTag,
      collectionTag: r1.data.collectionTag,
      likeCount: r1.data.likeCount,
      collectionCount: r1.data.collectionCount,
      commentCount: r1.data.commentCount
    })
    const temp = Wxparse.wxParse('essayContent', 'html', r1.data.rawContent, this, 5);
    this.setData({
      essayContent: temp
    })

    console.log("loadEssayComentList");
    await this.loadEssayComentList(true);
    this.setData({
      pageLoading: false,
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      essayId: options.essayId
    })
    this.loadPage();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})